<template>
  <div class="hyydxq">
    <!-- 预约信息 -->
    <van-search clearable background="transparent" v-model="params.name" class="b-b-2" placeholder="请输入关键词进行搜索" @search="onSearch" />
        <van-radio-group change="changes" v-model="radio">
        <van-cell v-for="(item, key) in list" :key="key" class="approvalItem content">
          <!-- <div class="flex-between font-14 line-height-3">
            <div class="col-333333 font-bold-500 font-15 m-r-10">{{item.name}}</div>
            <div class="col-999999 line-text-out text-right">剩余：200g</div>
          </div> -->
          <div class="flex-between font-13 line-height-3">
            <div class="col-666666 m-r-10 line-text-out">
                <p class="col-333333 font-bold-500 font-15">{{item.name}}</p>
            </div>
             <van-radio checked-color="#37B5B5" @click="selectProduct(item)" :name="key"></van-radio>
          </div>
        </van-cell>
        </van-radio-group>
  </div>
</template>

<script>
// 保养记录
import { getValue, setValue } from '@/utils/auth'
import { Cell, CellGroup, PullRefresh, Search, RadioGroup, Radio } from 'vant'
import { ypList } from '@/api/record'
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [PullRefresh.name]: PullRefresh,
    [Search.name]: Search,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio
  },
  data() {
    return {
      radio: '',
      currentDate: new Date(),
      list: [],
      params: {
        page: 1,
        limit: 10,
        name: ''
      },
      swFlag: getValue('swFlag') || '',
      productId: getValue('productId') || ''
    }
  },
  watch: {},
  created() {
    this.onLoad()
  },
  mounted() {
  },
  methods: {
    selectProduct(item) {
      if (this.swFlag == 'swAdd') {
        setValue('ypobjA', JSON.stringify(item))
      } else {
        setValue('ypobjE', JSON.stringify(item))
      }
      this.$bridge.call('base.closePage')
    },
    onSearch() {
      this.list = []
      this.onLoad()
    },
    onLoad() {
      ypList().then(res => {
        this.list = res.data.rows

        if (this.productId) {
          this.radio = this.list.map(item => item.id).indexOf(this.productId)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.topCeiling {
  position: fixed;
  top: 0;
  z-index: 1;
}
.van-field__control {
  border: 0 !important;
}
.content {
  //   border-bottom: 1px solid #eee;
  padding: 10px 15px;
}
::v-deep .van-search{
    width: 98%;
    margin: auto;
}
::v-deep .van-search__content{
    background-color: #fff;
    border-radius: 34px;

}
</style>
